<template>
  <div class="user-display" :class="[sizeClass, { 'show-avatar': showAvatar }]">
    <UserAvatar 
      v-if="showAvatar && displayUser" 
      :user="displayUser" 
      :size="size" 
      :circle="circle"
      class="user-display-avatar"
    />
    <span class="user-display-name" :class="{ 'with-avatar': showAvatar }">
      {{ displayName }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import UserAvatar from './UserAvatar.vue'
import { getUserDetail } from '@/api/users'
import type { User } from '@/types/user'

interface Props {
  // 支持多种输入方式
  userId?: string | null
  userName?: string | null
  userAvatar?: string | null
  user?: User | null
  // 用户信息映射（用于批量获取的场景，避免单个用户接口调用）
  usersMap?: Map<string, User> | Record<string, User> | null
  // 显示选项
  showAvatar?: boolean
  size?: 'small' | 'medium' | 'large'
  circle?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  userId: null,
  userName: null,
  userAvatar: null,
  user: null,
  usersMap: null,
  showAvatar: true,
  size: 'small',
  circle: true
})

const userInfo = ref<User | null>(null)
const loading = ref(false)

// 用户信息缓存（模块级别，所有组件实例共享）
const userCache = new Map<string, User>()
// 正在请求的用户ID集合（用于去重）
const pendingRequests = new Set<string>()
// 请求 Promise 映射（用于共享同一个请求）
const requestPromises = new Map<string, Promise<User | null>>()

// 计算显示的用户对象（用于头像显示）
const displayUser = computed(() => {
  // 优先使用完整的用户对象
  if (props.user) {
    return props.user
  }
  
  // 其次使用加载的用户信息
  if (userInfo.value) {
    return userInfo.value
  }
  
  // 如果只有用户名，创建临时对象用于显示头像（显示首字母）
  if (props.userName) {
    return {
      id: props.userId || '',
      username: props.userName,
      name: props.userName,
      avatar: props.userAvatar || undefined,
      email: '',
      roles: [],
      status: 'active',
      is_verified: false,
      created_at: '',
      updated_at: ''
    } as User
  }
  
  return null
})

// 计算显示名称
const displayName = computed(() => {
  if (props.user) {
    return props.user.name || props.user.username || '未命名用户'
  }
  
  if (userInfo.value) {
    return userInfo.value.name || userInfo.value.username || '未命名用户'
  }
  
  // 如果只有用户名，直接返回
  if (props.userName) {
    return props.userName
  }
  
  return '未分配'
})

// 从 usersMap 中获取用户信息
const getUserFromMap = (userId: string): User | null => {
  if (!props.usersMap || !userId) return null
  
  // 支持 Map 和 Record 两种格式
  if (props.usersMap instanceof Map) {
    return props.usersMap.get(userId) || null
  } else if (typeof props.usersMap === 'object') {
    return props.usersMap[userId] || null
  }
  
  return null
}

// 加载用户信息
const loadUserInfo = async () => {
  // 如果已经有完整的用户对象，直接使用
  if (props.user) {
    userInfo.value = props.user
    return
  }
  
  // 如果只有用户ID，优先从 usersMap 中查找
  if (props.userId) {
    // 如果已经有用户信息且ID匹配，不需要重新加载
    if (userInfo.value && userInfo.value.id === props.userId) {
      return
    }
    
    const userId = props.userId as string
    
    // 首先检查是否有正在进行的请求（避免重复请求，必须在缓存检查之前）
    if (pendingRequests.has(userId)) {
      // 如果有正在进行的请求，等待它完成
      const existingPromise = requestPromises.get(userId)
      if (existingPromise) {
        try {
          const user = await existingPromise
          if (user) {
            userInfo.value = user
          }
        } catch (error) {
          console.error('等待用户信息加载失败:', error)
        }
        return
      }
    }
    
    // 其次检查缓存（在检查请求之后，避免竞态条件）
    if (userCache.has(userId)) {
      userInfo.value = userCache.get(userId)!
      return
    }
    
    // 优先从 usersMap 中查找（批量获取的场景）
    const userFromMap = getUserFromMap(userId)
    if (userFromMap) {
      userInfo.value = userFromMap
      // 同时更新缓存
      userCache.set(userId, userFromMap)
      return
    }
    
    // 如果 usersMap 中没有，且没有缓存，且有用户名，直接使用用户名创建临时对象
    // 避免不必要的单个用户接口调用
    if (props.userName) {
      const tempUser = {
        id: userId,
        username: props.userName,
        name: props.userName,
        avatar: props.userAvatar || undefined,
        email: '',
        roles: [],
        status: 'active',
        is_verified: false,
        created_at: '',
        updated_at: ''
      } as User
      userInfo.value = tempUser
      userCache.set(userId, tempUser)
      return
    }
    
    // 最后才调用单个用户接口（作为后备方案）
    // 标记为正在请求
    pendingRequests.add(userId)
    loading.value = true
    
    // 创建请求 Promise
    const requestPromise = (async () => {
      try {
        const response = await getUserDetail(userId)
        let user = null
        if (response && response.data) {
          if (response.data.success && response.data.data) {
            user = response.data.data
          } else if (response.data.id) {
            user = response.data
          }
        }
        if (user) {
          // 缓存用户信息（所有实例共享）
          userCache.set(userId, user)
          return user
        } else {
          // 如果加载失败，使用传入的用户名和头像创建临时对象
          const tempUser = {
            id: userId,
            username: props.userName || '',
            name: props.userName || '',
            avatar: props.userAvatar || undefined,
            email: '',
            roles: [],
            status: 'active',
            is_verified: false,
            created_at: '',
            updated_at: ''
          } as User
          userCache.set(userId, tempUser)
          return tempUser
        }
      } catch (error) {
        console.error('加载用户信息失败:', error)
        // 如果加载失败，使用传入的用户名和头像创建临时对象
        if (props.userName) {
          const tempUser = {
            id: userId,
            username: props.userName,
            name: props.userName,
            avatar: props.userAvatar || undefined,
            email: '',
            roles: [],
            status: 'active',
            is_verified: false,
            created_at: '',
            updated_at: ''
          } as User
          userCache.set(userId, tempUser)
          return tempUser
        }
        return null
      } finally {
        // 清理请求状态
        pendingRequests.delete(userId)
        requestPromises.delete(userId)
      }
    })()
    
    // 保存 Promise 以便其他组件实例可以共享
    requestPromises.set(userId, requestPromise)
    
    try {
      const user = await requestPromise
      if (user) {
        userInfo.value = user
      }
    } finally {
      loading.value = false
    }
  } else if (props.userName) {
    // 如果只有用户名，创建临时对象
    userInfo.value = {
      id: props.userId || '',
      username: props.userName,
      name: props.userName,
      avatar: props.userAvatar || undefined,
      email: '',
      roles: [],
      status: 'active',
      is_verified: false,
      created_at: '',
      updated_at: ''
    } as User
  }
}

const sizeClass = computed(() => `user-display--${props.size}`)

// 监听 props 变化（只监听关键字段，避免 usersMap 变化导致重复调用）
watch(() => [props.userId, props.userName, props.user], () => {
  loadUserInfo()
}, { immediate: true })

// 注意：移除了 onMounted 中的 loadUserInfo() 调用，因为 watch 已经设置了 immediate: true
// 这样可以避免重复调用
</script>

<style scoped lang="scss">
.user-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  
  &.show-avatar {
    gap: 8px;
  }
}

.user-display-avatar {
  flex-shrink: 0;
}

.user-display-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
  &.with-avatar {
    // 当有头像时，名称可以换行
    white-space: normal;
    word-break: break-word;
  }
}

.user-display--small {
  font-size: 13px;
  
  .user-display-name {
    font-size: 13px;
  }
}

.user-display--medium {
  font-size: 14px;
  
  .user-display-name {
    font-size: 14px;
  }
}

.user-display--large {
  font-size: 16px;
  
  .user-display-name {
    font-size: 16px;
  }
}
</style>

